<template>
  <Tou></Tou>
  <div>
    <nav class="zj">
      <ol>
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
      </ol>
    </nav>
  </div>
  <div class="block text-center" style="height: 800px">
    <el-carousel height="auto" autoplay>
      <el-carousel-item style="height: 800px"> </el-carousel-item>
      <el-carousel-item style="height: 800px"> </el-carousel-item>
      <el-carousel-item style="height: 800px"> </el-carousel-item>
    </el-carousel>
  </div>
  <div class="shangping">
    <div class="shangping_1">
      <div class="hot">
        <div>-HOT DERIVATIVE</div>
        <h1>热门周边</h1>
        <div>一</div>
      </div>
      <ul class="sp" v-for="coy in coys" :key="coy.id">
        <div v-if="coy.sj == 1">
          <div class="i">
            <p>
              <router-link
                class="image_1"
                :to="{
                  path: `/spxx/${coy.id}/${mail.qq}`,
                }"
              >
                <img class="image" :src="getAssetsFile(coy.img1)" />
              </router-link>
            </p>
          </div>
          <a
            ><p class="sp_1">{{ coy.name }}</p></a
          >
          <p style="color: #e75014; font-weight: bold">{{ coy.price }} 元</p>
        </div>
      </ul>
    </div>
  </div>
  <div class="part">
    <div class="hot">
      <div>Popularity Series</div>
      <h1>人气系列</h1>
      <div>一</div>
    </div>
    <div class="hot_1">
      <ul>
        <li
          @mouseover="openItem(0)"
          @mouseleave="closeItem(0)"
          :class="{ hot_1_2: isOpen(0) }"
        >
          礼包收藏
        </li>
        <li
          @mouseover="openItem(1)"
          @mouseleave="closeItem(1)"
          :class="{ hot_1_2: isOpen(1) }"
        >
          手办模型
        </li>
        <li
          @mouseover="openItem(2)"
          @mouseleave="closeItem(2)"
          :class="{ hot_1_2: isOpen(2) }"
        >
          数码电子
        </li>
        <li
          @mouseover="openItem(3)"
          @mouseleave="closeItem(3)"
          :class="{ hot_1_2: isOpen(3) }"
        >
          服饰日用
        </li>
        <li
          @mouseover="openItem(4)"
          @mouseleave="closeItem(4)"
          :class="{ hot_1_2: isOpen(4) }"
        >
          新品专区
        </li>
      </ul>
    </div>
    <div class="hot_2 shangping">
      <ul v-show="isOpen(0)" class="shangping_1">
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/img/5.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">克伦特的逆转</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥299</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/img/6.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">凯丽强化机摆件</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥368</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/img/16.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">巴卡尔键鼠套装</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥318</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/img/1.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">混沌之神·奥兹玛</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥199</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/img/2.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">女鬼剑三觉武器模型套装</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥288</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/img/8.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">DNF官方艺术设定集</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥199</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/img/15.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">古韵灵犀·旗袍赛丽亚</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥399</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/shop200 (1).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">虎虎生威礼盒</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥99</p>
          </div>
        </li>
      </ul>
      <ul v-show="isOpen(1)" class="shangping_1">
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">阿波菲斯魔剑 模型套装</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥128</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (1).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">天空之忆妙趣盒（男鬼剑）</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥338</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (2).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">天空之忆妙趣盒（女鬼剑）</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥338</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (3).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">泰拉战斧 武器模型</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥88</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (4).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">泰拉巨剑 武器模型</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥88</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (5).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">泰拉战矛 武器模型</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥88</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (6).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">阿波菲斯魔剑 武器模型</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥88</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (7).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">别云剑 武器模型</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥88</p>
          </div>
        </li>
      </ul>
      <ul v-show="isOpen(2)" class="shangping_1">
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (8).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">F1天王赛 手表（纪念款）</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥218</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (9).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">苍穹巨剑（倒针） 手表</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥188</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (10).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">奥兹玛 数显充电线</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥98</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (11).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">泰波尔斯 手机指环</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥58</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (12).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">苍穹幕落 打火机</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥188</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (13).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">天帝电弧火机</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥158</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (14).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">时光 手表</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥188</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (15).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">金狮 手表</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥188</p>
          </div>
        </li>
      </ul>
      <ul v-show="isOpen(3)" class="shangping_1">
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (16).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">无限破坏者 帽子</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥88</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (17).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">魔枪 帽子</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥88</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (18).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">修罗长裤</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥168</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (19).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">女圣职 复古裤</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥268</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (20).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">勇气祝福 休闲裤</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥268</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (21).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">卢克塔罗牌 卫衣</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥238</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (22).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">光卢克 卫衣</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥238</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (23).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">卢克塔罗牌 外套</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥258</p>
          </div>
        </li>
      </ul>
      <ul v-show="isOpen(4)" class="shangping_1">
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (24).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">机械七战神针织帽</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥58</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (25).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">机械七战神鸭舌帽</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥38</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (26).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">机械七战神项链</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥49</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (27).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">伊希斯·血翼之链</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥58</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (28).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">普雷合金钥匙扣</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥19.9</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (29).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">夏日男鬼剑马口铁徽章</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥9.9</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/da1 (30).jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">巴卡尔主题平沿帽</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥66</p>
          </div>
        </li>
        <li class="i_1 sp">
          <div>
            <div class="i">
              <a href="#" class="image_1"
                ><img src="../assets/image/Lex.jpg" class="image"
              /></a>
            </div>
            <a href="#"><p class="sp_1">Nike</p></a>
            <p style="color: #e75014; font-weight: bold">现价：￥1899</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="bs">
    <div class="hot">
      <div>-Brand Series-</div>
      <h1>品牌系列</h1>
      <div>一</div>
    </div>
    <div class="bs_1">
      <a href="#"><img src="../assets/image/zd4.jpg" alt="" /></a>
      <a href="#"><img src="../assets/image/yd5.jpg" alt="" /></a>
    </div>
  </div>
  <Wei></Wei>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { getAssetsFile } from "../assets/img";
import { RouterLink, useRoute } from "vue-router";
import axios from "axios";
import "../assets/css/bootstrap.css";
import Tou from "../views/tou.vue";
import Wei from "../views/wei.vue";
const coys = ref([]);
const coy: any = ref({ mail: {} });
const mail: any = ref({});
const openIndex = ref(0); // 当前打开元素的索引
const lastHoveredIndex = ref(-1); // 最后一个悬停的元素的索引

const openItem = (index) => {
  openIndex.value = index; // 设置当前打开元素的索引
  lastHoveredIndex.value = index; // 设置最后一个悬停的元素的索引
};
const closeItem = (index) => {
  if (index !== lastHoveredIndex.value) {
    openIndex.value = -1; // 关闭所有元素
  }
};
const isOpen = computed(() => {
  return (index) => openIndex.value === index; // 计算属性判断是否打开对应的元素
});

/**用户*/
const route = useRoute();
mail.value.qq = route.params.qq;
const Mail = () => {
  axios.get("http://127.0.0.1:1234/U/" + mail.value.qq).then((response) => {
    mail.value = response.data;
  });
};
Mail();

/**显示商品*/
const StuN = () => {
  axios.post("http://127.0.0.1:1234/C/search", coy.value).then((response) => {
    coys.value = response.data;
    console.log(coys.value);
  });
};
StuN();
</script>

<style scoped>
@import "../assets/css/TandW.css";
.el-carousel__item:nth-child(2n) {
  background-image: url("../assets/image/flash374.jpg");
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url("../assets/image/tou_1.jpg");
}
.zj ol {
  display: flex;
  height: 66px;
  line-height: 66px;
  background-color: gainsboro;
}
.shangping {
  width: 1226px;
  height: 100%;
  background-color: ghostwhite;
  align-items: center;
  padding-top: 50px;
  margin-bottom: 50px;
}
.shangping_1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}
.sp {
  background-color: white;
  margin-bottom: 18px;
}
.sp p {
  text-align: center;
  color: #e75014;
}
.sp .sp_1 {
  color: #9a8069;
  font-size: 18px;
}
.sp .sp_1:hover {
  color: rgb(144, 98, 200);
  font-size: 19px;
}

.hot {
  width: 250px;
  height: 170px;
  color: #b6a597;
  font-size: 36px;
  text-align: center;
}
.image_1 {
  display: block;
  width: 100%;
  height: 258px;
  margin: auto;
  overflow: hidden;
}
.image {
  transition: transform 0.7s ease-in-out;
  width: 258px;
  height: 258px;
}
.image:hover {
  transform: scale(1.5);
}
.part {
  width: 100%;
  padding-bottom: 88px;
}
.hot_1 {
  width: 1120px;
  margin: auto;
  margin-top: 50px;
}
.hot_1 ul li {
  width: 99px;
  height: 39px;
  border: 1px solid #b6a597;
  text-align: center;
  float: left;
  line-height: 39px;
  margin: 0 60px;
  margin-right: 65px;
  cursor: pointer;
  color: #9a6983;
}
.hot_1_2 {
  background-color: #fa7c3d;
  color: white !important;
}
.hot_2 {
  width: 1200px;
  height: 700px;
  margin: 0 auto;
  background: white;
}
.i_1 {
  background-color: rgb(245, 245, 245);
  border-top: 2px solid rgb(245, 245, 245);
  margin-bottom: 10px;
}
.bs {
  background-color: rgb(247, 247, 248);
  text-align: center;
  margin-bottom: 50px;
}
.bs_1 img {
  width: 43%;
}
</style>
